<template>
  <div style="height: 100%">
    <n-tabs type="segment" style="height: 100%">
      <n-tab-pane name="basic" style="height: 100%" tab="图层">
        <div class="tab-wrapper" v-if="layer">
          <div class="top">
            <n-upload
              directory-dnd
              action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
              :max="1"
              style="padding: 0px; box-sizing: border-box"
              :show-file-list="false"
            >
              <n-upload-dragger>
                <div v-if="!layer.img">
                  <div style="margin-bottom: 12px">
                    <img
                      src="http://124.221.115.232:8018/static/png/noImage.png"
                      alt=""
                      style="object-fit: contain; width: 120px"
                    />
                  </div>
                  <n-p depth="3" style="margin: 8px 0 0 0">
                    最大不能超过1M,最好使用PNG格式
                  </n-p>
                </div>
                <div v-else>
                  <img
                    :src="layer.img"
                    alt=""
                    style="object-fit: contain; width: 120px"
                  />
                </div>
              </n-upload-dragger>
            </n-upload>
            <SettingItem name="图层名称">
              <n-input
                size="small"
                v-model:value="layer.name"
                placeholder="请输入图层名称"
              ></n-input>
            </SettingItem>
            <SettingItem name="UUID">
              <n-input
                size="small"
                placeholder="请输入UUID"
                v-model:value="layer.pid"
                disabled
              ></n-input>
            </SettingItem>
            <SettingItem name="图层类型">
              <n-select
                size="small"
                v-model:value="layer.type"
                :options="layerTypeOption"
                disabled
              ></n-select>
            </SettingItem>
            <SettingItem name="创建者">
              <div class="user">
                <n-avatar
                  size="small"
                  :src="'https://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/app%2Fspace%2F7c7adc8ccc524163921d2d403f1f3c5b_d7f6b05214f24a6a842f2acaa2e30146_buoumao-zhongdianse.png'"
                >
                </n-avatar>
                <span>{{ "管理员" }}</span>
              </div>
            </SettingItem>

            <SettingItem name="是否显示">
              <div style="display: flex">
                <n-switch
                  v-model:value="layer.visible"
                  size="large"
                  :round="false"
                />
              </div>
            </SettingItem>
            <SettingCollapse
              v-if="layer.type == 'Point' || layer.type == 'point'"
              name="图层样式"
            >
              <SettingItem name="点类型">
                <n-select
                  size="small"
                  v-model:value="properties.dotType"
                  :options="dotTypeOptions"
                ></n-select>
              </SettingItem>
              <div v-if="properties.dotType == 'circle'">
                <SettingItem :show-alpha="false" name="内圈颜色">
                  <n-color-picker
                    v-if="
                      !checkType(properties.paint['circle-color'], 'object')
                    "
                    :show-alpha="false"
                    v-model:value="properties.paint['circle-color']"
                  ></n-color-picker>
                  <n-input
                    v-else
                    disabled
                    :value="properties.paint['circle-color']"
                    size="small"
                  ></n-input>
                  <n-button
                    class="expression-button"
                    size="small"
                    circle
                    quaternary
                    type="primary"
                    @click="
                      openExpressionDialog(
                        'paint',
                        'circle-color',
                        properties.paint['circle-color']
                      )
                    "
                  >
                    <template #icon>
                      <n-icon><CodeSlashOutline /></n-icon>
                    </template>
                  </n-button>
                </SettingItem>
                <SettingItem :show-alpha="false" name="内圈透明">
                  <n-slider
                    size="small"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    v-model:value="properties.paint['circle-opacity']"
                  ></n-slider>
                </SettingItem>
                <SettingItem name="内圈宽度">
                  <n-input-number
                    :min="1"
                    v-model:value="properties.paint['circle-radius']"
                    size="small"
                  ></n-input-number>
                </SettingItem>
                <SettingItem name="外圈颜色">
                  <n-color-picker
                    :show-alpha="false"
                    v-model:value="properties.paint['circle-stroke-color']"
                  ></n-color-picker>
                </SettingItem>
                <SettingItem :show-alpha="false" name="外圈透明">
                  <n-slider
                    size="small"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    v-model:value="properties.paint['circle-stroke-opacity']"
                  ></n-slider>
                </SettingItem>
                <SettingItem name="外圈宽度">
                  <n-input-number
                    :min="1"
                    v-model:value="properties.paint['circle-stroke-width']"
                    size="small"
                  ></n-input-number>
                </SettingItem>
                <SettingItem name="虚化">
                  <n-input-number
                    :min="0"
                    :max="1"
                    :step="0.1"
                    v-model:value="properties.paint['circle-blur']"
                    size="small"
                  ></n-input-number>
                </SettingItem>
              </div>
            </SettingCollapse>
            <SettingCollapse v-if="layer.type == 'Polygon'" name="面图层样式">
              <SettingItem name="面类型">
                <n-select
                  size="small"
                  v-model:value="properties.polygonType"
                  :options="polygonTypeOptions"
                ></n-select>
              </SettingItem>
              <div v-if="properties.polygonType == 'basic'">
                <SettingItem :show-alpha="false" name="内面颜色">
                  <n-color-picker
                    v-if="!checkType(properties.paint['fill-color'], 'object')"
                    :show-alpha="false"
                    v-model:value="properties.paint['fill-color']"
                  ></n-color-picker>
                  <n-input
                    v-else
                    disabled
                    :value="properties.paint['fill-color']"
                    size="small"
                  ></n-input>
                  <n-button
                    class="expression-button"
                    size="small"
                    circle
                    quaternary
                    type="primary"
                    @click="
                      openExpressionDialog(
                        'paint',
                        'fill-color',
                        properties.paint['fill-color']
                      )
                    "
                  >
                    <template #icon>
                      <n-icon><CodeSlashOutline /></n-icon>
                    </template>
                  </n-button>
                </SettingItem>
                <SettingItem :show-alpha="false" name="内面透明">
                  <n-slider
                    size="small"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    v-model:value="properties.paint['fill-opacity']"
                  ></n-slider>
                </SettingItem>

                <SettingItem name="外面颜色">
                  <n-color-picker
                    :show-alpha="false"
                    v-model:value="properties.paint['fill-outline-color']"
                  ></n-color-picker>
                </SettingItem>
              </div>
            </SettingCollapse>
            <SettingCollapse
              v-if="layer.type == 'LineString'"
              name="线图层样式"
            >
              <SettingItem name="线段类型">
                <n-select
                  size="small"
                  v-model:value="properties.lineType"
                  :options="lineTypeOptions"
                ></n-select>
              </SettingItem>
              <div>
                <SettingItem :show-alpha="false" name="线段颜色">
                  <n-color-picker
                    v-if="!checkType(properties.paint['line-color'], 'object')"
                    :show-alpha="false"
                    v-model:value="properties.paint['line-color']"
                  ></n-color-picker>
                  <n-input
                    v-else
                    disabled
                    :value="properties.paint['line-color']"
                    size="small"
                  ></n-input>
                  <n-button
                    class="expression-button"
                    size="small"
                    circle
                    quaternary
                    type="primary"
                    @click="
                      openExpressionDialog(
                        'paint',
                        'line-color',
                        properties.paint['line-color']
                      )
                    "
                  >
                    <template #icon>
                      <n-icon><CodeSlashOutline /></n-icon>
                    </template>
                  </n-button>
                </SettingItem>
                <SettingItem :show-alpha="false" name="线段长度">
                  <n-input-number
                    :min="1"
                    v-model:value="properties.paint['line-width']"
                    size="small"
                  ></n-input-number>
                </SettingItem>
                <SettingItem :show-alpha="false" name="虚线长度">
                  <n-input
                    pair
                    separator="-"
                    :placeholder="['实现', '虚线']"
                    clearable
                    size="small"
                    :value="properties.paint['line-dasharray']"
                    @update:value="
                      (pair) => {
                        console.log(pair);
                        properties.paint['line-dasharray'] = pair.map(
                          (item) => parseInt(item) || 0
                        );
                      }
                    "
                  />
                </SettingItem>
                <SettingItem name="线段透明">
                  <n-slider
                    size="small"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    v-model:value="properties.paint['line-opacity']"
                  ></n-slider>
                </SettingItem>
              </div>
            </SettingCollapse>
            <SettingCollapse v-if="layer.type == 'Symbol'" name="图标层样式">
              <div></div>
            </SettingCollapse>

            <SettingCollapse name="导入导出">
              <SettingItem name="导入操作">
                <n-button
                  @click="handleOpenFile"
                  block
                  type="error"
                  size="small"
                  >GEOJSON / SHAPE FILE</n-button
                >
              </SettingItem>
              <SettingItem name="导入操作">
                <n-button
                  @click="handleOpenKMLFile"
                  block
                  type="error"
                  size="small"
                  >KML文件</n-button
                >
              </SettingItem>
              <SettingItem name="导出操作">
                <n-button
                  @click="handleExportGeoJson"
                  block
                  type="success"
                  size="small"
                  >GEOJSON</n-button
                >
              </SettingItem>
            </SettingCollapse>
          </div>
          <div class="bottom">
            <div class="bottom">
              <n-button
                @click="handleConfirm"
                class="bottom-button"
                type="success"
                secondary
                stronger
                >保存</n-button
              >
              <n-button
                secondary
                stronger
                @click="handleDelete"
                class="bottom-button"
                type="error"
                >删除</n-button
              >
            </div>
          </div>
        </div>
        <div v-else>-- 请选择图层 --</div>
      </n-tab-pane>
      <n-tab-pane name="data" tab="数据" style="height: 100%">
        <div class="tab-wrapper">
          <div class="top">
            <n-button
              @click="handleNewDataSource"
              size="small"
              block
              type="primary"
              secondary
              stronger
              >+ 添加新字段</n-button
            >
            <div class="columns-list">
              <div class="column-item" v-for="(item, index) in layer.columns">
                <div class="left">
                  <div class="column-name"><span># </span> {{ item.name }}</div>
                  <span class="column-key"> {{ item.key }}</span>
                  <div class="column-type">
                    <n-tag size="small" type="success">{{ item.type }}</n-tag>
                  </div>
                </div>
                <div class="right">
                  <n-popselect
                    trigger="click"
                    @update:value="handleDataPopup"
                    :options="dataPopupOption"
                  >
                    <n-button
                      @click="() => (selectColumnIndex = index)"
                      type="primary"
                      circle
                      quaternary
                      stronger
                    >
                      <template #icon>
                        <n-icon><EllipsisVerticalOutline /></n-icon>
                      </template>
                    </n-button>
                  </n-popselect>
                </div>
              </div>
            </div>
            <!-- <SettingItem name="数据源">
              <n-select size="small" placeholder="请选择数据源">
                <template #header>
                  <n-button
                    @click="handleNewDataSource"
                    size="small"
                    block
                    type="primary"
                    secondary
                    stronger
                    >添加新数据源</n-button
                  >
                </template>
              </n-select>
            </SettingItem> -->
          </div>
          <div class="bottom">
            <n-button @click="handleConfirm" type="primary" block
              >保存</n-button
            >
          </div>
        </div>
      </n-tab-pane>
    </n-tabs>
    <dialogForm
      ref="expressionRef"
      :schema="expressionSchema"
      @submit="handleExpressionSubmit"
    ></dialogForm>
    <dialogForm
      ref="formRef"
      :schema="layerForm"
      @submit="handleLayerFormSubmit"
    ></dialogForm>
  </div>
</template>

<script lang="ts" setup>
import SettingItem from "./components/item.vue";
import SettingCollapse from "./components/collapse.vue";
import {
  LocationOutline,
  CodeSlashOutline,
  EllipsisVerticalOutline,
} from "@vicons/ionicons5";
import { useMapStore } from "@/store/map";
import { computed, watch, ref } from "vue";
import { updateLayer, deleteLayer, addFeature } from "@/api";
import { NButton, NSpace, useMessage, NProgress } from "naive-ui";
import expressionSchema from "@/pages/home/components/form/expression.json";
import dialogForm from "@/components/form-builder/dialog.vue";
import { useEventBus } from "@vueuse/core";
import { onMounted, onUnmounted } from "vue";
import { useDialog, useModal } from "naive-ui";
import layerForm from "@/json/layerForm.json";
import { v1 } from "uuid";
import { h } from "vue";
import WKT from "terraformer-wkt-parser";
import * as turf from "@turf/turf";
import { ILayer } from "@/struct";
import togeojson from "@mapbox/togeojson";
const formRef = ref();
const dialog = useDialog();
const expressionRef = ref();
const mapStore = useMapStore();
const message = useMessage();
const layer = ref<any>({});
const mapBus = useEventBus("map");
const selectColumnIndex = ref(0);
const layerConfigBus = useEventBus("layer.config");
const modal = useModal();
const dotTypeOptions = ref([
  {
    label: "圆点",
    value: "circle",
  },
  {
    label: "图片",
    value: "symbol",
  },
  {
    label: "着色器",
    value: "shader",
  },
]);
const polygonTypeOptions = ref([
  {
    label: "基础面",
    value: "basic",
  },

  {
    label: "着色器",
    value: "shader",
  },
]);
const lineTypeOptions = ref([
  {
    label: "实心线段",
    value: "solid",
  },

  {
    label: "动态虚线",
    value: "animate-dashed",
  },
]);
const layerTypeOption = ref([
  {
    label: "点",
    value: "Point",
  },
  {
    label: "线",
    value: "LineString",
  },
  {
    label: "面",
    value: "Polygon",
  },
  {
    label: "图标",
    value: "Symbol",
  },
]);
const dataPopupOption = ref([
  {
    label: "编辑",
    value: 0,
    tap: () => {
      formRef.value.open({
        title: "编辑字段",
        data: layer.value.columns[selectColumnIndex.value],
      });
    },
  },
  {
    label: "删除",
    value: 1,
    tap: () => {
      dialog.error({
        title: "删除字段",
        content: `确定要删除字段-${
          layer.value.columns[selectColumnIndex.value].name
        }？删除后不可恢复。`,
        positiveText: "确认",
        negativeText: "取消",
        onPositiveClick(e) {
          layer.value.columns.splice(selectColumnIndex.value, 1);
        },
      });
    },
  },
]);
const properties = computed({
  get: () => {
    if (layer.value) {
      if (!layer.value.style) {
        //@ts-ignore
        layer.value.style = {};
      }
      //@ts-ignore
      if (!layer.value.style.paint) {
        //@ts-ignore
        layer.value.style.paint = {};
      }
      //@ts-ignore
      if (!layer.value.style.paint) {
        //@ts-ignore
        layer.value.style.paint = {};
      }
      //@ts-ignore
      if (!layer.value.style.paint) {
        //@ts-ignore
        layer.value.style.paint = {};
      }
      return layer.value.style;
    } else {
      return {};
    }
  },
  set: (val) => {
    if (layer.value) {
      //@ts-ignore
      layer.value.style = val;
    }
  },
});

watch(
  () => mapStore.selectLayer,
  (val) => {
    // console.log("mapStore.layers", mapStore.layers);
    const selectLayer = mapStore.datasetInfo.layers.find(
      (item) => item.pid == mapStore.selectLayer
    );
    // console.log(selectLayer);
    // console.log(layer);
    if (selectLayer) {
      //@ts-ignore
      layer.value = selectLayer;
    }
  },
  {
    immediate: true,
  }
);
watch(
  () => layer.value.visible,
  (val) => {
    mapBus.emit({
      type: "relayout",
      value: { visibility: val ? "visible" : "none" },
      id: `${layer.value.pid}-${layer.value.type}`,
    });
  }
),
  watch(
    () => properties.value,
    (val) => {
      if (val) {
        console.log(val);
        console.log(layer.value);
        mapBus.emit({
          type: "repaint",
          value: val,
          id: `${layer.value.pid}-${layer.value.type}`,
        });
      }
    },
    {
      deep: true,
    }
  );
const handleConfirm = () => {
  const layer = mapStore.getLayerByPid(mapStore.selectLayer);
  // console.log(layer);
  updateLayer(layer)
    .then((res) => {
      message.success("修改成功");
    })
    .catch((e) => {
      message.error(`修改失败:${e}`);
    });
};
const handleDelete = () => {
  const layer = mapStore.getLayerByPid(mapStore.selectLayer);
  deleteLayer({ ids: [layer.id] })
    .then((res) => {
      message.success("删除成功");
    })
    .catch((e) => {
      message.error(`删除失败:${e}`);
    });
};
const openExpressionDialog = (from: string, name: string, value: any) => {
  // console.log(value);
  const data = typeof value != "object" ? "[]" : JSON.stringify(value);
  expressionRef.value.open({
    from,
    name,
    data,
  });
};
const handleExpressionSubmit = (data: any) => {
  // console.log(data);
  try {
    properties.value[data.from][data.name] = JSON.parse(data.data);
  } catch {
    properties.value[data.from][data.name] = data.data;
  }
};
const handleLayerFormSubmit = ({ title, data }) => {
  console.log(title, data);
  if (title == "新增数据源") {
    layer.value.columns.push(data);
  } else if (title == "编辑字段") {
    layer.value.columns[selectColumnIndex.value] = data;
  }
  // console.log(data);
  // try {
  //   properties.value[data.from][data.name] = JSON.parse(data.data);
  // } catch {
  //   properties.value[data.from][data.name] = data.data;
  // }
};
const handleDataPopup = (key: number) => {
  // console.log(e);
  // console.log(dataPopupOption.value[key]);
  if (dataPopupOption.value[key].tap) {
    dataPopupOption.value[key].tap();
  }
};
const checkType = (val: any, type: string) => {
  return typeof val == type;
};

onMounted(() => {
  console.log(properties.value);
  mapBus.emit({
    type: "relayout",
    value: { visibility: layer.value.visible ? "visible" : "none" },
    id: `${layer.value.pid}-${layer.value.type}`,
  });
  // setTimeout(() => {
  //   handleLayerUpdate();
  //   // mapBus.emit({ type: "repaint", value: properties.value, id: "main" });
  // }, 1000);
});
const handleExportGeoJson = () => {
  const jsonData = JSON.stringify(mapStore.getCurrentFeaturesByGeoJson());
  const blob = new Blob([jsonData], { type: "application/json" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = mapStore.selectLayer;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};
const handleNewDataSource = () => {
  formRef.value.open({ title: "新增数据源" });
};
// const handleOverride;
const handleOpenFile = () => {
  const fileInput = document.createElement("input");
  fileInput.type = "file";
  fileInput.accept = ".json"; // 限制选择的文件类型为JSON

  // 监听文件选择事件
  fileInput.onchange = function (e: any) {
    const file = e.target.files[0];
    if (!file) {
      return;
    }

    // 使用FileReader读取文件内容
    const reader = new FileReader();
    reader.onload = function (event: any) {
      try {
        // 尝试解析JSON
        const jsonData = JSON.parse(event.target.result);
        dialog.warning({
          title: "请选择添加方式",
          action: () =>
            h(
              NSpace,
              {},
              {
                default: () => [
                  h(
                    NButton,
                    {
                      type: "warning",
                      onClick() {
                        dialog.destroyAll();
                        const percentage = ref(0);
                        modal.create({
                          title: "正在导入数据",
                          content: () =>
                            h(NProgress, {
                              type: "line",
                              percentage: percentage.value.toFixed(0),
                            }),
                          preset: "dialog",
                          closable: false,
                          maskClosable: false,
                        });
                        if (jsonData.features) {
                          const delta = 100 / jsonData.features.length;
                          for (let i = 0; i < jsonData.features.length; i++) {
                            const feature = jsonData.features[i];
                            const pid = v1();
                            addFeature({
                              name: feature.properties.name || pid,
                              properties: { ...feature.properties, pid },
                              parent: mapStore.selectLayer,
                              pid,
                              geometry: WKT.convert(feature.geometry),
                              center: WKT.convert(feature.geometry),
                              img: "",
                            })
                              .then((res) => {
                                percentage.value += delta;
                              })
                              .catch((e) => {
                                message.error("导入失败");
                              });
                          }
                        }
                        // console.log(js);
                        // for(let i=0;i<)
                        // setTimeout(() => {
                        //   modal.destroyAll();
                        // }, 5000);
                      },
                    },
                    { default: () => "追加(只添加新点位)" }
                  ),
                  h(
                    NButton,
                    { type: "error" },
                    { default: () => "覆盖(将会清空该图层)" }
                  ),
                ],
              }
            ),
        });
        console.log(jsonData); // 这里可以处理JSON数据
      } catch (error) {
        console.error("解析JSON时出错:", error);
      }
    };
    reader.onerror = function () {
      console.error("文件读取中发生错误");
    };
    reader.readAsText(file); // 以文本形式读取文件
  };

  // 触发点击事件，打开文件选择对话框
  fileInput.click();
};
const handleOpenKMLFile = () => {
  const fileInput = document.createElement("input");
  fileInput.type = "file";
  fileInput.accept = ".kml"; // 限制选择的文件类型为JSON

  // 监听文件选择事件
  fileInput.onchange = function (e: any) {
    const file = e.target.files[0];
    if (!file) {
      return;
    }

    // 使用FileReader读取文件内容
    const reader = new FileReader();
    reader.onload = function (event: any) {
      try {
        const xml = new DOMParser().parseFromString(
          event.target.result,
          "text/xml"
        );
        console.log(xml);
        const geojson = togeojson.kml(xml, {
          style: true,
        });
        console.log(geojson, "geojson");
        dialog.warning({
          title: "请选择添加方式",
          action: () =>
            h(
              NSpace,
              {},
              {
                default: () => [
                  h(
                    NButton,
                    {
                      type: "warning",
                      onClick: async () => {
                        dialog.destroyAll();
                        const percentage = ref(0);
                        modal.create({
                          title: "正在导入数据",
                          content: () =>
                            h(NProgress, {
                              type: "line",
                              percentage: percentage.value.toFixed(0),
                            }),
                          preset: "dialog",
                          closable: false,
                          maskClosable: false,
                        });
                        if (geojson.features) {
                          const delta = 100 / geojson.features.length;
                          for (let i = 0; i < geojson.features.length; i++) {
                            const feature = geojson.features[i];
                            const pid = v1();
                            // console.log(feature.geometry);
                            // feature.geometry
                            let center = feature.geometry;
                            if (feature.geometry.type == "LineString") {
                              center = turf.centroid(feature.geometry).geometry;
                              feature.geometry.coordinates =
                                feature.geometry.coordinates.map((item) => {
                                  return item.splice(0, 2).map((subItem) => {
                                    return subItem.toFixed(6);
                                  });
                                });
                            } else if (feature.geometry.type == "Point") {
                              feature.geometry.coordinates =
                                feature.geometry.coordinates
                                  .splice(0, 2)
                                  .map((subItem) => {
                                    return subItem.toFixed(6);
                                  });
                            }
                            // console.log(feature.geometry);
                            console.log(
                              WKT.parse(WKT.convert(feature.geometry))
                            );
                            try {
                              const res = await addFeature({
                                name: feature.properties.name || pid,
                                properties: { ...feature.properties, pid },
                                parent: mapStore.selectLayer,
                                pid,
                                geometry: WKT.convert(feature.geometry),
                                center: WKT.convert(center),
                                img: "",
                              });

                              percentage.value += delta;
                            } catch (e) {
                              message.error("导入失败");
                            }
                          }
                        }
                        // console.log(js);
                        // for(let i=0;i<)
                        // setTimeout(() => {
                        //   modal.destroyAll();
                        // }, 5000);
                      },
                    },
                    { default: () => "追加(只添加新点位)" }
                  ),
                  h(
                    NButton,
                    { type: "error" },
                    { default: () => "覆盖(将会清空该图层)" }
                  ),
                ],
              }
            ),
        });
      } catch (error) {
        console.error("解析JSON时出错:", error);
      }
    };
    reader.onerror = function () {
      console.error("文件读取中发生错误");
    };
    reader.readAsText(file); // 以文本形式读取文件
  };

  // 触发点击事件，打开文件选择对话框
  fileInput.click();
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.user {
  display: flex;
  align-items: center;
  cursor: pointer;
  span {
    margin-right: 6px;
  }
}
.tab-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;

  .top {
    flex: 1;
  }
  .bottom-button {
    width: 100%;
    margin-top: 10px;
  }
  .inline-item {
    height: 28px;
    line-height: 28px;
    text-align: left;
  }
}
.columns-list {
  margin: 12px 0;
  text-align: left;

  .column-item {
    display: flex;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .column-name {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 6px;
        display: flex;
        align-items: baseline;
        span {
          font-size: 24px;
          margin-right: 3px;
        }
      }
      .column-key {
        font-size: 14px;
        opacity: 0.8;
        margin: 0 6px;
      }
    }
  }
  .column-item:hover {
    box-shadow: 0px 0px 0px 2px #63e2b799;
    // background-color: #fff;
  }
}
</style>
<style>
.n-scrollbar-content {
  height: 100%;
}
</style>
